<template>
  <div class="content_box">
    <div class="box">
      <p class="title">01.如何预定下单完成支付</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.选择想要使用的房间</p>
            <p>2.选择套餐模式或小时模式</p>
            <p>3.完成微信或余额支付</p>
          </div>
          <img mode="widthFix" src="/static/images/group1.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="box">
      <p class="title">02.如何进入包厢</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.下单后进入订单或首页 </p>
            <p>2.点击“开房间门”即可通电使用</p>
            <p>3.点击“转赠订单”，将订单分享给朋友，领取成功后你将不再拥有该订单 </p>
            <p>4.提前到达，可点击“提前入场”消费</p>
          </div>
          <img mode="widthFix" src="/static/images/group2.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="box">
      <p class="title">03.订单退款与续费问题</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.如订单进行中，将不能进行退款</p>
            <p>2.预约中的订单可点击“取消订单”进行退款</p>
            <p>3.如续费进行中，将不能进行退款</p>
            <p>4.预约中的续费可点击“退款”进行退款</p>
          </div>
          <img mode="widthFix" src="/static/images/group3.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="box">
      <p class="title">04.离开请携带好随身物品</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.结束前15分钟、5分钟将进行提醒</p>
            <p>2.消费结束后5分钟房间将进行断电</p>
            <p>3.若您遗失物品请您及时联系客服</p>
          </div>
          <img mode="widthFix" src="/static/images/group4.png" alt=""/>
        </div>
      </div>
    </div>
    <p>.</p>
  </div>
</template>
 
<script>
export default {
  components: {
  },
  data() {
    return{
      
    }
  },
  onShow() {},
  methods: {
    
  },
  onHide() {},
  onLoad() {
    
  },
  onUnload() {
  },
  created() {}
};
</script>

<style lang="scss"  scoped>
.content_box {
  background: #F5F5F5;
  padding-top:24rpx;
  .box{
    width: 92%;
    margin:0 auto;
    background: #FEFAF1;
    padding-top:24rpx;
    padding-bottom:24rpx;
    border-radius: 4rpx;
    margin-bottom:24rpx;
    .title{
      font-size:34rpx;
      color:#222;
      font-weight: bold;
      padding:0 24rpx;
      height: 82rpx;
      line-height: 82rpx;
    }
    .msg{
      width: 84%;
      margin:0 auto;
      background: #fff;
      padding:30rpx;
      border-radius: 4rpx;
      .title1{
        font-size:26rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        img{
          width: 24rpx;
          height: 24rpx;
          margin-right:8rpx;
        }
      }
      .nr{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top:20rpx;
        .left{
          width: 76%;
          color:#666;
          font-size:26rpx;
          line-height: 50rpx;
        }
        img{
          width: 116rpx;
        }
      }
    }
  }
  .ewm_box{
    width: 90%;
    margin:40rpx auto;
    .text{
      display: flex;
      font-size:24rpx;
      color:#666;
      align-items: center;
      margin-bottom:50rpx;
      .gt{
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border:1px solid #788933;
        margin-right:10rpx;
        font-size:24rpx;
        color:#788933;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .ewm{
      font-size:26rpx;
      text-align: center;
      color:#666;
      img{
        width: 200rpx;
      }
      p{
        margin-bottom:50rpx;
      }
    }
  }
}
</style>
